iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 18
0
自我挑戰組

網頁工程師在windows上的求生秘訣系列 第 18 篇

將localhost變成自己喜歡的網址(nginx設定)

12th鐵人賽
11602 瀏覽

  • 分享至 

  • xImage
    •  

前一個是透過windows內建的hosts設定來完成將localhost設定成有網址的內容，但如果需要同時讓多個網頁都有網址，那透過原本的hosts是無法進行的，就要倚靠其他工具的幫忙了

在這邊介紹nginx要怎麼設定

環境安裝

  1. 先到nginx官網下載
    • 建議下載stable(穩定版)的，會相對比較沒有問題發生
  2. 將下載下來的檔案解壓縮就可以了

使用說明

  1. 透過terminal開啟這個資料夾
    • 在這個資料夾中按下shift+滑鼠右鍵，點選使用powershell開啟
  2. 在裡面打上以下內容就啟動了
start .\nginx.exe
  1. 啟動後打上localhost就可以看到以下畫面
  2. 需要更多說明可以在裡面打上以下命令即可
.\nginx.exe -h

PS C:\Users\User\Desktop\nginx-1.18.0> .\nginx.exe -h
nginx version: nginx/1.18.0
Usage: nginx [-?hvVtTq] [-s signal] [-c filename] [-p prefix] [-g directives]

Options:
  -?,-h         : this help
  -v            : show version and exit
  -V            : show version and configure options then exit
  -t            : test configuration and exit
  -T            : test configuration, dump it and exit
  -q            : suppress non-error messages during configuration testing
  -s signal     : send signal to a master process: stop, quit, reopen, reload
  -p prefix     : set prefix path (default: NONE)
  -c filename   : set configuration file (default: conf/nginx.conf)
  -g directives : set global directives out of configuration file
  1. 常用功能
.\nginx.exe -s stop # stop nginx
.\nginx.exe -s reload # reload nginx

設定說明

在nginx的主要設定檔為nginx.conf
位置在conf/nginx.conf
將這個檔案用記事本或是vscode等文字編輯器打開，會看到以下內容


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

我們要設定的部分是http的部分，所以將http中的server新增一個

server {
        listen       80; # 監聽的port 
        server_name  dev.127.0.0.1.xip.io; # 打上瀏覽器上的網址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:4000; # 將這個網址轉往的目標port號
        }

    }

在監聽的port號上，因為希望是直接輸入網址即可跳轉，所以要設定80才可以，這點要特別注意

另外，server_name不能重複命名，另外，因為這樣服務是做一個模擬的proxy server，在server_name上要特別加上127.0.0.1.xip.io才有辦法將這段網址的proxy server指向127.0.0.1
因此，網址只能是xxxx.127.0.0.1.xip.io

所以最後的設定檔會如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    server {
        listen       80;
        server_name  dev.127.0.0.1.xip.io;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:4000;
        }

    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

設定完成後，進行reload就可以看到成功跳轉的畫面了!!


上一篇
將localhost變成自己喜歡的網址(簡易hosts設定)
下一篇
Git簡易介紹(一)
系列文
網頁工程師在windows上的求生秘訣 共 30 篇
  1. 26
    讓windows的觸控板更接近mac的小方法
  2. 27
    透過虛擬碼來作流程圖-umlet
  3. 28
    好用的線上IDE分享
  4. 29
    如何快速上手第三方套件
  5. 30
    線上課程學習心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙